<template>
  <view class="page-body">
<!--      <movable-area class="movable">-->
<!--        <movable-view :out-of-bounds="false" :x="x" :y="y" @change="xyStorage" direction="all">-->
          <div @click="tempNotice" class="imgBox flex a-item j-content">
            <image class="img"  src="https://www.zjjqf.cn/file/static/notice.png"></image>
            <div class="agencyEvent">new</div>
          </div>
<!--        </movable-view>-->
<!--      </movable-area>-->
  </view>
</template>

<script>

export default {
  name: "jBtn",
  data() {
    return {
      time:0,
      x: 20,
      y: 300,
    }
  },
  created() {
    const xy = uni.getStorageSync('xy')
    console.log(`位置:${xy.x},${xy.y}`)
    if (xy){
      this.x = xy.x
      this.y = xy.y
    }
    console.log(this.x)
    console.log(this.y)
  },
  methods: {
    onChange: function(e) {
      this.x = e.detail.x
      this.y = e.detail.y
    },
    xyStorage(e){
      uni.setStorage({
        key:'xy',
        data: e.detail
      })
    },
    tempNotice(){
      uni.navigateTo({url: '/pages/notice/index',})
    }
  }
}
</script>

<style lang="scss" scoped>
.movable{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 999;
  .imgBox{
    pointer-events: auto;
    background-color: rgba(204,204,204,0.3);
    width: 100rpx;
    height: 100rpx;
    border-radius: 60rpx;
    z-index: 999;
    .img{
      width: 80rpx;
      height: 80rpx;
    }
  }
}
.imgBox{
  pointer-events: auto;
  background-color: rgba(204,204,204,0.3);
  width: 100rpx;
  height: 100rpx;
  border-radius: 60rpx;
  z-index: 999;
  position: absolute;
  top:200rpx;
  right: 50rpx;
  .img{
    width: 80rpx;
    height: 80rpx;
  }
}
.agencyEvent{
  width: 40rpx;
  height: 40rpx;
  border-radius: 30rpx;
  position: absolute;
  right: 1rpx;
  top: 3rpx;
  background-color: red;
  color: #ffffff;
  font-size: 20rpx;
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
